<template>
  <div>
    <div class="bg" >
      <div class="first_type_bl bg">
        <div class="newcate-body">
          <div class="common-newcate newcate-hot">
            <i class="iconfont icon-huo"
               style="display: block;position: absolute;left: 1px;top: -5px;font-size: 54px;color: #1e9fff;"></i>
            <span
              style="float: left;font-size: 16px;color: #1e9fff;border-right: 1px solid #dcdcdc;margin-left: 10px;">今日热门：</span>
            <a class="allhide" href="javascript:void(0)">隐藏二级目录</a>
           <ul class="common-clearboth">
             <li><a href="http://oe.11kys.cn/goodlist/recate/rid/1.html" target="_blank" style="color:#000">推荐目录</a>
             </li>
             <li><a href="http://oe.11kys.cn/goodlist/recate/rid/2.html" target="_blank" style="color:#000">推荐目录</a>
             </li>
           </ul>
          </div>
        </div>

        <div
          class="common-newcate common-newcate-item"
          v-for="cate in categoryList"
          :key="cate.catalogID">
          <div class="newcate-item-header overwords">
            <i class="iconfont icon-liebiao icon" :style="{ color: cate.color }"></i>
            <span style="margin-left: 8px; " >{{ cate.catalogName }}</span>
<!--            <a class="hide" href="javascript:void(0)">-->
<!--              <em style="display: inline;font-style: normal;font-weight: normal;">隐藏</em>-->
<!--              <i style="font-style: normal; font-weight: normal; display: none;">显示</i></a>-->
          </div>
          <div class="newcate-item-body common-clearboth">
            <a  target="_blank"
               v-for="subCate in cate.children"
               :key="subCate.catalogID"
                :href="`/goods-list4?categoryId=${subCate.catalogID}`"
            >
              {{ subCate.catalogName }}</a>
          </div>
        </div>

      </div>
    </div>
    <qqservice />
  </div>

</template>

<script>
import Recommends from '~/components/recommends'
import Quick from '~/components/quick'
import getPlatform from "~/common/platform";
import qqservice from '~/components/themes/qqservice'

export default {
  layout: "webin24",
  components: {
    Quick,
    Recommends,
    qqservice,
  },
  data() {
    return {
      recommendsCategory: [],
      searchText: '',
      categoryList: [],
      imgTip: {
        left: '0px',
        top: '0px',
        src: ''
      }
    }
  },

  async mounted() {
    const res = await this.$axios.get('/goods/catalog/tree')
    if (res.code === 1001 && res.body) {
      this.categoryList = res.body
      console.log(this.categoryList );
    }
    this.checkSearch()
    // this.getList()

  },
  methods: {
    checkSearch() {
      const {
        query: { keywords }
      } = this.$route
      if (keywords) {
        this.searchText = keywords
        this.doSearch()
      }
    },
    doSearch() {
      if (!this.searchText) {
        return this.$message.error('请输入关键字')
      }
      location.href = `/goods-list4?keywords=${this.searchText}`
    },
    showImg(cate, e) {
      if (cate && cate.img) {
        const { x, y } = e.target.getBoundingClientRect()
        this.imgTip.top = `${document.documentElement.scrollTop + y - 330}px`
        this.imgTip.left = `${window.scrollX + x - 150}px`
        this.imgTip.src = cate.img
      } else {
        this.imgTip.src = ''
      }
    }
  },
  watch: {
    $route(newVal, oldVal) {
      if(newVal !== oldVal) {
        this.checkSearch()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style2/common.css';
// @import 'assets/style/style2/openlogin.css';
@import 'assets/style/style2/style.css';
@import 'assets/style/style2/font_1451715_0505c2bxv7b7.css';
.hide {
  float: right;
  color: #a0a0a0;

}

.allhide {
  float: right;
  color: #a0a0a0;

}

.common-newcate {
  position: relative;
  width: 1200px;
  margin: 0 auto 10px;
  background: white;
  padding: 12px 10px;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #ddd;
}

.newcate-hot {
  padding-left: 45px;
  min-height: 45px;
}

.newcate-hot img {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 20px;
  top: 14px;
}

.newcate-hot ul li {
  position: relative;
  float: left;
}

.newcate-hot ul li::after {
  position: absolute;
  content: '';
  right: 0;
  width: 1px;
  height: 15px;
  top: 5px;
  background: #dcdcdc;
}

.newcate-hot ul li:nth-last-child(1)::after {
  content: none;
}

.newcate-hot ul li a {
  font-size: 12px;
  display: block;
  line-height: 25px;
  padding: 0 20px;
  transition: 0.2s;
}

.newcate-hot ul li a:hover {
  color: inherit;
  text-decoration: underline;
}

.common-newcate-item {
  position: relative;
  padding: 0 20px;
}

.common-newcate-item .newcate-item-header img {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  left: 0px;
  top: 14px;
}

.newcate-item-body {
  position: relative;
  width: 100%;
  padding: 15px 0;
  border-top: 1px solid #dcdcdc;
}

.newcate-item-body a {
  width: 20%;
  float: left;
  font-size: 12px;
  line-height: 40px;
  padding-right: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: 0.2s;
  box-sizing: border-box;

  border-bottom: 1px solid #f4f5f8;
  text-align: center;
  /*     margin-left: -1px;
  border: 1px solid #ddd;
  margin-bottom: -1px; */
}



.cate-ucenterbox {
  position: relative;
  width: 1200px;
  margin: 10px auto 0;
  background: white;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 5px #dcdcdc;
}

.cate-userleft {
  position: relative;
  float: left;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #dcdcdc;
}

.cate-userleft img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.cate-userleft p {
  font-size: 12px;
  line-height: 30px;
}

.cate-userright {
  position: relative;
  margin-left: 20px;
  width: 200px;
  float: left;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}

.cate-userright p {
  line-height: 35px;
}

.cate-user-btns {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.cate-user-btns .layui-btn {
  height: 28px;
  line-height: 28px;
}

.tradebox-left {
  border-left: 1px solid #dcdcdc;
  border-right: 0;
}

.tradebox-con {
  margin-top: 20px;
}

.tradebox-con ul li a i {
  font-size: 50px;
}

.tradebox-right {
  width: 765px;
  margin-left: 23px;
}

.tradebox-con ul li {
  width: initial;
  flex: 1;
}
</style>
